<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <list :arr="list1"></list>
        <!-- list(list1) -->
        <list :arr="list2"></list>

    </div>
</body>
<template id="mylist">
    <div>
        <ul>
            <li v-for="item in arr">{{item}} </li>
        </ul>
    </div>
</template>
<script>
    //组件:一个封装的标签  或者定义标签  使用方式和普通的标签使用一样(div)
    //组件:是一个函数  可以接收内容  返回结果
    //为什么需要组件   和 为什么需要函数 是一个意思

    //组件:全局的和局部的
    // function  list(arr){

    //   }

    Vue.component("list", {
        props: ["arr"],
        template: `#mylist`
    })

    new Vue({
        el: "#app",
        data: {
            list1: [1, 2, 3, 4],
            list2: ["a", "b", "c", "d"]
        }
    })

</script>

</html>